@charset "UTF-8";

/******************************************【统一样式】******************************************/
*{
    margin: 0px;
    padding: 0px;
}
body{
    font-family: 微软雅黑;
    font-size: 13px;
    line-height: 1.8;
    color: #555;
    background: #fff;
    font-family: 微软雅黑;
    overflow-x: hidden;
}
a{
    text-decoration: none;
    color: #555;
}
a:hover{
    color:#07528C;
}
ul{
    list-style: none;
    padding: 0px;
}



/********************************************【head之head——top】**************************************************/

.head .headtop{/*设置头部上半部分的大的背景*/
    width: 100%;
    height: 32px;
    background-color: #E8E8E8;
}

.head .headtop .wrap{/*设置头部上半部分的大的背景 中的【wrap位置居中】*/
    width: 1200px;
    height: 32px;
    margin-left: auto;
    margin-right: auto;
/*    background-color: red;*/
}
.wrap span{/*设置【欢迎访问时风官网】字体大小及颜色*/
    line-height: 32px;
    font-size: 15px;
    color:#555555;
}

.wrap .headtop_right{/*设置子公司、微博等的【外边框】*/
    width: 800px;
    height: 32px;
    float: right;
 /*   background-color: yellow;*/
}
.wrap .headtop_right li{/*设置子公司、微博等的【位置 浮动 及 间距】*/
    color: #505050;
    height: 32px;
    float: right;
   /* padding: 0 10px;*/
    line-height: 32px;
    font-size: 15px;
}
.wrap .headtop_right li a{/*设置【微博】那三个a标签的字体颜色*/
    display: block;
    color: #505050 ;
}


.zigongsi{/*【设置子公司的下拉框】*/
    width: 110px;
    height:0px;
    background-color: white;
    transition:height 1s;
    overflow: hidden;
    text-align: center;
}
.zi:hover .zigongsi{/*【鼠标移到子公司上显示下拉框】*/
    width: 110px;
    height: 130px;
    background-color: white;
    transition:height 1s;
    border-bottom: 2px solid red;
    text-align: center;
    position: relative;
    z-index: 20;
}

.wangshangbangong,.caigoupingtai{/*【设置网上办公的下拉框】*/
    width: 100px;
    height: 0px;
    background-color: #FFFFFF;
    overflow: hidden;
    transition: height 1s;
    text-align: center;
    margin-right: -35px;
    z-index: 999;
}

.bangong:hover .wangshangbangong,
.caigou:hover .caigoupingtai{/*【鼠标移到【网上办公】上显示下拉框】*/
    width: 100px;
    height: 80px;
    background-color: #FFFFFF;
    transition: height 1s;
    border-bottom: 2px solid red;
    text-align: center;
    position: relative;
    z-index: 999;
}

.headtop_right li{/*【使得微博 交易平台之间有距离】*/
    padding: 0 10px;
}


/********************************************【head之head——bottom】**************************************************/
 .head .headbottom{
     width: 100%;
     height: 88px;
     /*background-color: yellow;*/
 }
 .headbottom .wrap{
     width: 1200px;
     height: 88px;
  /*   background-color: mediumpurple;*/
     margin-right: auto;
     margin-left: auto;
 }
 .headbottom .left a{/*设置head部分的时风图标*/
     width: 220px;
     height: 88px;
     display: block;
     float: left;
     background: url("../img/sf_logo.png");

 }


 .right_language{/*设置【中/EN】*/
     width: 70px;
     height: 88px;
   /*  background-color: blue;*/
     float: right;
     line-height: 88px;
     text-align: center;
 }
.right_language a{
    display: block;
}
 .china{
     width: 200px;
     height: 0px;
     background-color: #4C4A4F;
     float: right;
     text-align: center;
     line-height: 60px;
     overflow: hidden;
     transition: height 1s;
 }

 .china a{/*设置中/EN*/
     display: block;
     float: left;
     padding-left: 40px;
     color: white;
     font-size: 13px;
 }
 .china a:hover{/*设置中/EN*/
     color: red;
 }

 .right_language:hover .china{/*设置中/EN*/
     width: 200px;
     height: 60px;
     background-color: #4C4A4F;
     float: right;
     text-align: center;
     line-height: 60px;
     transition: height 1s;
     position: relative;
 }


 .right_search{/*设置放大镜*/
     width: 70px;
     height: 88px;
  /*   background-color: orange;*/
     float: right;
 }
 .right_search a{/*设置放大镜*/
     display: block;
     float: right;
     width: 20px;
     height: 20px;
     background: url("../img/ico.png")no-repeat;
     background-position:0 0;
     margin: 0 25px;
     margin-top: 50%;
 }

 .fangdajing{
     width: 200px;
     height: 0px;
     margin-top: 65px;
     position: relative;
     right:  65px;
     top: 22px;
     overflow: hidden;
     transition: height 1s;
 }


.headbottom .right_search:hover .fangdajing{
    width: 200px;
    height: 50px;
    margin-top: 65px;
    position: relative;
    right:  65px;
    top: 22px;
    overflow: hidden;
    transition: height 1s;
    /*border: 2px solid black;*/
}

 .headbottom .right_search .fangdajing input{
     height: 42px;
     width: 180px;
     border: 4px solid  #4C4A4F;
     padding-left: 10px;
     margin-top: 1px;
 }


 /**************【nav导航栏】*************/

.nav{
    width: 800px;
    height: 88px;
   /* background-color: yellow;*/
    float: right;
}
.nav ul li{/*使导航列表项也浮动*/
    float: right;
/*    border: 1px solid gray;*/
    width: 90px;
    height: 88px;

}
.nav ul li a{
    display: block;
    text-align: center;
    line-height: 88px;
    font-size: 19px;
}
.nav ul li .nav1:hover{
    color: white;
    background-color: red;
}

.nav ul li .first{
    background-color: red;
    color: white;
}
/*****************************【❤❤开始导航的下拉框设置❤❤】************************/
.subs{/*【联系时风下拉框总的div】*/
    width: 400px;
    height: 0px;
   /* background-color: orange;*/
    float: right;
    overflow: hidden;
    transition: height 1s;
}
.sub_s{
    width: 400px;
    height: 0px;
    /* background-color: orange;*/
    float: left;
    overflow: hidden;
    transition: height 1s;
}

 /******************【❤开始设置下拉框里的内容❤】*********************/
.subs .a,.sub_s .a{
    width: 150px;
    height: 250px;
   /* background-color: plum;*/
    float: left;
}
.subs .a a,.sub_s .a a{
    display: block;
    width: 150px;
    height: 30px;
    border-bottom: 1px solid #E8E8E8;
    padding-top: -5px;
  /*  background-color: palevioletred;*/
    color: #505050;
    font-size: 15px;
    text-align: center;
}
.headbottom .nav .subs a:hover,.sub_s a:hover{
    color: red;
    background-color: white;
}
.headbottom li:hover {
    background-color: red;
}
.headbottom li:hover .nav1{
    color:white;
}
.navs  .img img , .nav_s .img img{/*【k客服】*/
    width: 250px;
    height: 170px;
}

.subs .p,.sub_s .p{
    width: 250px;
    height: 80px;
    /*background-color: deeppink;*/
    float: right;
}

.subs .p p, .sub_s .p p{
    color:#A4A4A4;
    font-size: 22px;
    line-height: 60px;

}
/***************【❤结束设置下拉框里的内容❤】*********************/



/****************【❤开始控制下拉框的显示】***************/

.navs:hover .subs{/*【联系时风下拉框总的div】*/
    width: 400px;
    height: 250px;
     background-color: white;
    float: right;
    overflow: hidden;
    transition: height 1s;
    position: relative;
}
.nav_s:hover .sub_s{/*【联系时风下拉框总的div】*/
    width: 400px;
    height: 250px;
     background-color: white;
    float: left;
    overflow: hidden;
    transition: height 1s;
    position: relative;
}
/**********************【❤❤结束导航的下拉框设置❤❤】*****************/

/************************************【head已经结束】************************************/

.main .diyipinpai{
    width: 100%;
    float: left;
    overflow-x: hidden;
}
.diyipinpai .diyipinpai_1{
    width: 280px;
    height:120px;
    background:rgba(199,21,24,0.7);
    position: absolute;
    top: 315px;
    left: 70px;
    float: left;
}

.diyipinpai .diyipinpai_1 .p1{
     color: white;
     font-size: 30px;
     margin-top: 10px;
     margin-left: 50px;
     font-weight: bold;
 }
.diyipinpai .diyipinpai_1 .p2{
    color: white;
    font-size: 14px;
    margin-top: 10px;
    margin-left: 50px;
    font-weight: bold;
}
.main .wenzi{
    width: 1200px;
    height: 56px;
  /*  background-color: hotpink;*/
    float: left;
    margin-left: 80px;
    margin-top: 33px;
    color:#505050 ;
}

.main .mains{
    width: 1200px;
    height: 760px;
 /*   background-color: orange;*/
    float: left;
    margin-left: 80px;
    margin-top: 30px;
}
/*简介*/
.main .mains .jianjie{
    float: left;
    width: 400px;
    height: 380px;
    background-color: red;
}

.jianjie_img{
    width: 400px;
    height: 380px;
    background-color: blue;
    float: left;
    overflow: hidden;
}
.jianjie_img img{
    width: 400px;
    height: 380px;
    transition: 1s ease all;
}
.jianjie_img img:hover{
    transform: scale(1.2);
    overflow: hidden;
}
.jianjie_img .jianjie_wenzi{
    float: left;
    position: absolute;
    top: 591px;
    left: 106px;
    z-index: 200;
}

.jianjie_wenzi h2{
    color: white;
}
.jianjie_wenzi .jianjie_p{
    width: 400px;
    height: 30px;
    margin-top: 5px;
    color: white;
    font-size: 15px;
}


/*理念*/
.main .mains .linian{
    float: left;
    width: 400px;
    height: 380px;
  /*  background-color: pink;*/
}

.linian h2{
    color: #045491;
    margin-top: 35px;
    margin-left: 30px;
}
.linian p {
    color: #505050;
    font-size: 15px;
    margin-left: 30px;
    margin-top: 3px;
}
.linian p:hover{
    color: #5A7991;
}

.linian .jiazhi {
    width: 344px;
    height: 30px;
  /*  background-color: red;*/
    margin-top: 60px;
    margin-left:30px;
}
.linian .jiazhi span{
    padding-right:20px;
    color: #5A7991;
}


/*研发中心*/
.main .mains .yanfa{
    float: left;
    width: 400px;
    height: 380px;
    background-color: mediumpurple;
}
.yanfa img{
    width: 400px;
    height: 380px;
}
/*
.yanfa h2{
    position: absolute;
    top: 590px;
    right:340px;
    color: red;

}*/
.yanfa .yanfa_wenzi{
    position: absolute;
    top: 589px;
    right: 70px;
    width: 400px;
    height: 100px;
 /*   background-color: yellow;*/

}
.yanfa .yanfa_wenzi h2{
    padding-left: 30px;
    color: red;
}
.yanfa .yanfa_p{
    width: 400px;
    height: 30px;
/*    background-color: paleturquoise;*/
    margin-top: 5px;
}
.yanfa_p p{
    color:#505050 ;
    font-size: 15px;
    padding-left: 30px;
}

.yanfa_p p:hover{
    color:#07528C;
}

.yanfa_1000{/*1000那个位置的外边框div*/
    width: 260px;
    height: 170px;
  /*  background-color: darksalmon;*/
    margin-left: 113px;
    margin-top: 80px;
}
.yanfa_1000 p{
    color:#505050;
    font-size: 20px;
}
.yanfa_1000 .yanfa_p1{/*专利项的位置*/
    margin-left: 120px;
    margin-top: -40px;
}
.yanfa_1000 span{/*1000字体的大小及颜色*/
    font-size: 97px;
    color: red;
    font-weight: bold;
}

.yanfa a{
    display: block;
}
.yanfa a:hover p{
    color:#07528C;
}


/*大事记*/
.dashiji{
    width: 400px;
    height: 380px;
    background-color: #D92B2B;
    float: left;
}

 a .dashiji{
    display: block;
}

.dashiji h2{
    color: white;
    margin-left: 30px;
    margin-top: 30px;
}
.dashiji table{
    margin-top: 30px;
}

.dashiji td{
    color: white;
    font-size: 15px;
}

.dashiji .dashiji_2{
    padding-top: 20px;
}
.dashiji span{
    color: white;
    font-size: 24px;
    margin-left: 30px;
    font-weight: bold;
}


/*领导*/
.lingdao{
    width: 400px;
    height: 380px;
    background-color: cornflowerblue;
    float: left;
    overflow: hidden;
}

.lingdao img{
    width: 400px;
    height: 380px;
    transition: 1s;
}
.lingdao img:hover{
    transform: scale(1.2);
}
.lingdao h2{
    position: absolute;
    top: 968px;
    left: 510px;
    color: white;

}


/*企业荣誉*/
.rongyu{
    width: 400px;
    height: 380px;
    background-color: fuchsia;
    float: left;
    overflow: hidden;
}
.rongyu img{
    width: 400px;
    height: 380px;
    transition: 1s;
}
.rongyu img:hover{
    transform: scale(1.2);
}

.rongyu h2{
    color: white;
    position: absolute;
    top: 968px;
    right: 340px;

}


/******************************【底端】******************************888*/

.foot{
    width: 100%;
    height: 300px;
    background-color: #0C3D77;
    float: left;;
    margin-top: 40px;
}/*foot 大的外边框*/

.foot .wrap_top{/*设置footer的一个【wrap】*/
    width: 1200px;
    height: 300px;
    /*   background-color: pink;*/
    margin-left: auto;
    margin-right:auto;
}/*设置footer的一个【wrap】*/

.foot .foot_left{/*设置foot 左边的div  包括时风logo和走进时风简介等*/
    width: 260px;
    height: 300px;
    /* background-color: burlywood;*/
    float: left;
}/*设置foot 左边的div  包括时风logo和走进时风简介等*/

.foot .foot_left .foot_logo img{/*设置底部的logo图片*/
    float: left;
    margin-left: 30px;
}/*设置底部的logo图片*/

.foot .foot_left .foot_logo .zoujinshifeng{/*【走进时风】*/
    color: white;
    font-size: 25px ;
    margin-left: 30px;
    padding-bottom: 30px;
}/*【走进时风】*/

.foot .foot_left .foot_left_font{/*设置logo下面的文字*/
    float: left;/*设置logo下面的文字浮动，保证与logo在一行*/
    /*  border: 1px solid  black;*/
    height: 200px;
    width: 100px;
    /*height: 300px;*/
    margin-left: 26px;
    overflow:scroll;/*让滚动条显示*/
    overflow-x: hidden;
}

.foot .foot_left .foot_left_font li{/*设置foot_left部分的li【走进时风，文化简介，在左下角】*/
    color: #A2D3E4;
    margin-left: 10px;
    line-height: 20px;
    margin-top: 16px;
    margin-bottom: 0px;
}/*设置foot_left部分的li【走进时风，文化简介，在左下角】*/

/***************************【设置❤❤滚动条】*********************************/
.foot .foot_left .foot_left_font::-webkit-scrollbar{/*设置滚动条宽度*/
    width: 5px;
}
.foot .foot_left .foot_left_font::-webkit-scrollbar-track{/*设置滚动条内轨道的颜色*/
    background-color: red;
}
.foot .foot_left .foot_left_font::-webkit-scrollbar-thumb{
    background-color:yellow ;
}

/****************************【❤❤滚动条设置结束！！】****************************/



.foot .foot_left .foot_left_font li a{/*设置foot_left部分的li下的a标签字体*/
    color: #A2D3E4;
}/*设置foot_left部分的li下的a标签字体*/

.foot .foot_left .foot_left_font li a:hover{/*设置foot_left部分的li下的a标签字体*/
    color: white;
}/*设置foot_left部分的li下的a标签字体*/

.foot_main,/*设置foot_main和 foot_right的边框*/
.foot_right{
    /*    background-color: burlywood;*/
    width: 280px;
    height: 300px;
    float: left;
    margin-left: 10px;
    border-left: 2px solid #617184;
}

.foot .foot_main img,/*设置底部的car和phone图片*/
.foot .foot_right img{
    float: left;
    margin-left: 30px;
}

.foot .foot_main .shifengchanpin,/*【时风产品】四个字的设置*/
.foot .foot_right .lianxiwomen {
    color: white;
    font-size: 25px ;
    margin-left: 30px;
    padding-bottom: 30px;

}

.foot .foot_main .foot_main_font table{/*设置foot_main_font部分*/
    margin-left: 90px;
    margin-top:16px;
    padding-left: 20px;
    color: #AFD3FE;
}/*设置foot_main_font部分*/

.foot .foot_main .foot_main_font table td{/*设置td的宽度*/
    width: 80px;
}/*设置td的宽度*/

.foot_main_font a .hang td:hover{
    color: white;
}

.foot .foot_right .foot_right_font p{/*设置集团那个地方的位置等*/
    margin-left: 90px;
    margin-top:16px;
    padding-left: 10px;
}
.foot .foot_right .foot_right_font p a{/*设置集团那个地方的字体信息等*/
    color: #AFD3FE;
}
.foot .foot_right .foot_right_font p a:hover{/*设置集团那个地方的字体信息等*/
    color:white;
}
.foot .foot_right .foot_right_font p .num{/*设置集团那个地方的位置等*/
    font-size: 18px;
    color: #AFD3FE;
}

/************************二维码*********************/

.foot .photo .weibo{/*【设置 放：第一个二维码 的区域】*/
    width: 130px;
    height: 130px;
    /*  background-color: yellow;*/
    float: left;
    margin-top: 60px;
    margin-left: 20px;
}
.foot .photo .shouji{/*设置放第二个二维码的 区域*/
    width: 130px;
    height: 130px;
    /*background-color: red;*/
    float: left;
    margin-top:-130px;
    margin-left: 180px;
}
.foot .photo .weibo p,
.foot .photo .shouji p{/*设置【官方微博】和【手机站】这几个字的颜色*/
    color: white;
}
.foot .photo .final{/*设置【二维码下方的外边框 即： 红色区域】*/
    width: 285px;
    height: 40px;
    background-color: red;
    float: right;
    margin-top: 70px;
    margin-right: 1px;
}
.foot .photo .final_left a{/*设置【二维码下方的 红色区域内的【成员公司】这几个字】*/
    width: 90px;
    height: 40px;
    /*  background-color: red;*/
    line-height: 40px;
    text-align: center;
    font-size: 17px;
    color: white;
    padding-left: 5px;
    float: left;
}
.foot .photo .final_right a{/*设置【二维码下方的 红色区域内的【+】这个字】*/
    color: white;
    float: right;
    font-size: 27px;
    line-height: 40px;

}



.wrap_bottom{
    width: 1200px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    /*background-color: red;*/
}
.wrap_bottom .left{/*设置【QQ】等图标的外边框*/
    width: 300px;
    height:100px;
    /* background-color: yellow;*/
    float: left;
}
.wrap_bottom .left p{/*设置【分享】两个字*/
    display:block;
    float: left;
    padding-top: 25px;
    padding-right: 20px;
    padding-left: 35px;
}
.wrap_bottom .left img{/*设置【QQ】等图标位置*/
    padding-top: 25px;
    padding-left: 15px;
}

.wrap_bottom .main{/*设置【有限公司】部分的边框div*/
    width: 400px;
    height: 100px;
    /* background-color: deeppink;*/
    float: left;
    margin-left: 50px;
}
.wrap_bottom .main .p1{/*设置【有限公司】部分的内容*/
    padding-top: 20px;
}
.wrap_bottom .main p{
    padding-left: 30px;
}
.wrap_bottom .main span{
    font-weight: bold;
}
.wrap_bottom .right{/*设置最右下角【法律声明那部分的内容】*/
    width: 285px;
    height: 60px;
    background-color:#D5D5D5;
    float: left;
    margin-left: 164px;
}
.wrap_bottom .right a{
    padding-left: 5px;
    padding-right: 10px;
    line-height: 60px;
    border-right: 1px solid #B6AEB6;
    color: black;
}
.wrap_bottom .right a:hover{
    text-decoration: underline;
    color: black;
}


.daohang{/*设置最右侧那个侧边栏*/
    width: 72px;
    height: 260px;
    /*    background-color: red;*/
    float: left;
    position: fixed;
    right: 0px;
    bottom: 85px;

}
.daohang .top a{/*设置侧边导航的最上面那个框*/
    width: 72px;
    height: 72px;
    display: block;
    float: right;
    background: url("../img/right.png") no-repeat;
    background-position: 0px 0px;
    transition: 1s;
}
.daohang .top a:hover{/*设置侧边导航的最上面那个框*/
    background-position: -72px 0px;
}


.daohang .main a{/*设置侧边导航的中间那个框*/
    width: 72px;
    height: 72px;
    display: block;
    float: right;
    background: url("../img/right.png") no-repeat;
    background-position: 0px -72px;
    transition: 1s;
}
.daohang .main a:hover{/*设置侧边导航的中间那个框*/
    background-position: -72px -72px;
}

.daohang .bottom a{/*设置侧边导航的底下【即倒数第二个】那个框*/
    width: 72px;
    height: 72px;
    display: block;
    float: right;
    background: url("../img/right.png") no-repeat;
    background-position: 0px -144px;
    transition: 1s;
}
.daohang .bottom .a1:hover{/*设置侧边导航的底下【即倒数第二个】那个框*/
    background-position: -72px -144px;
}



.bottom .cebian .celogo{/*设置侧边弹出的二维码 宽度为0 保证鼠标不指向它的时候不显示*/
    display: block;
    width: 0px;
    height: 140px;
    background: url("../img/侧边导航弹出的二维码.png");
    transition: width 1s;
    position: fixed;
    right: 72px;
    bottom: 130px;
}

.bottom:hover .celogo{/*设置侧边弹出的二维码 宽度为140 保证鼠标指向它的时候显示*/
    display: block;
    width: 140px;
    height: 140px;
    background: url("../img/侧边导航弹出的二维码.png");
    position: fixed;
    right: 72px;
    bottom: 130px;
    transition: width 1s;
}

.bottom:hover .a1{/*使得鼠标移到【手机站】或者【弹出的二维码】的时候 【手机站位置】仍然保持【蓝色】*/
    background-position: -72px -144px;

}

.daohang .bottom2 a{/*设置侧边导航的最底下那个框*/
    width: 72px;
    height: 44px;
    display: block;
    float: right;
    background: url("../img/right.png") no-repeat;
    background-position: 0px -213px;
    /*    position: fixed;
        bottom: 80px;*/
    transition: 1s;
}
.daohang .bottom2 a:hover{/*设置侧边导航的最底下那个框*/

    background: url("../img/right.png") no-repeat;
    background-position: -72px -213px;
}